import React, { Component } from "react";
import { Card, Input, Select, Form, Button, message } from "antd";
import { connect } from "dva";
import { getCurrentTenant } from "../../../../utils/utils";

const { Option } = Select;
@connect(stores => ({
  registerData: stores.channelRegisterModel
}))
class ImConfig extends Component {
  handleSubmit = e => {
    e.preventDefault();
    const { personId, commitEnable = () => {}, pushChannelId } = this.props;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const temp = values.owners;
        const t = {
          owners: [{ key: personId, value: temp }]
        };

        const { dispatch } = this.props;
        dispatch({
          type: "channelRegisterModel/test",
          payload: {
            ...values,
            ...t,
            pushChannelId,
            useStatus: values.useStatus ? 1 : 0,
            tenantCode: getCurrentTenant().tenantCode[0]
          }
        }).then(res => {
          if (res.success) {
            message.success("测试成功！");
            commitEnable(true);
          } else {
            message.error("测试失败！");
          }
        });
      }
    });
  };

  render() {
    const {
      getFieldDecorator,
      getFieldValue,
      setFieldsValue
    } = this.props.form;

    if (!getFieldValue("channelSysType")) {
      setFieldsValue({
        channelSysType: 1
      });
    }

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };

    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 4
        }
      }
    };

    return (
      <Card
        title={
          <span>
            渠道配置
            {/* <Tooltip title="请输入订阅的阿里CSB接口服务相关数据，进行校验。">
              <span>
                <Icon
                  type="question-circle"
                  theme="filled"
                  style={{
                    fontSize: 16,
                    color: "rgba(0,0,0,0.25)",
                    marginLeft: 8
                  }}
                />
              </span>
            </Tooltip> */}
          </span>
        }
        style={{ marginTop: 16, marginBottom: 16 }}
      >
        <Form {...formItemLayout} style={{ width: 800 }}>
          <Form.Item label="应用端接收类型：">
            {getFieldDecorator("channelSysType", {
              rules: [
                {
                  required: true,
                  message: "请选择接收类型!"
                }
              ]
            })(
              <Select style={{ width: 466 }} onChange={this.props.onTypeChange}>
                <Select.Option value={1}>REST API</Select.Option>
                <Select.Option value={2}>RockerMQ</Select.Option>
              </Select>
            )}
          </Form.Item>
          {getFieldValue("channelSysType") === 1 && (
            <React.Fragment>
              <Form.Item label=" API名称：">
                {getFieldDecorator("apiName", {
                  rules: [
                    {
                      message: "请输入API名称!"
                    },
                    {
                      required: true,
                      message: "请输入API名称!"
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={100}
                    placeholder="请输入API名称"
                  />
                )}
              </Form.Item>
              <Form.Item label=" URL：">
                {getFieldDecorator("apiUrl", {
                  rules: [
                    {
                      message: "请输入URL!"
                    },
                    {
                      required: true,
                      message: "请输入URL!"
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={150}
                    placeholder="请输入URL"
                  />
                )}
              </Form.Item>

              <Form.Item label=" version：">
                {getFieldDecorator("apiHost", {
                  rules: [
                    {
                      required: true,
                      message: "请输入version!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={200}
                    placeholder="请输入version"
                  />
                )}
              </Form.Item>
              <Form.Item label=" app_key：">
                {getFieldDecorator("apiAppKey", {
                  rules: [
                    {
                      required: true,
                      message: "请输入app_key!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={50}
                    placeholder="请输入app_key"
                  />
                )}
              </Form.Item>

              <Form.Item label=" app_secret：">
                {getFieldDecorator("apiAppSecret", {
                  rules: [
                    {
                      required: true,
                      message: "请输入app_secret!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={50}
                    placeholder="请输入app_secret"
                  />
                )}
              </Form.Item>
              <Form.Item label=" method：">
                {getFieldDecorator("method", {
                  rules: [
                    {
                      required: true,
                      message: "请选择method!",
                      whitespace: true
                    }
                  ]
                })(
                  <Select
                    showSearch
                    style={{ width: 466 }}
                    placeholder="请选择method"
                  >
                    <Option value="POST">POST</Option>
                    <Option value="GET">GET</Option>
                  </Select>
                )}
              </Form.Item>
              <Form.Item {...tailFormItemLayout}>
                <Button
                  type="primary"
                  htmlType="submit"
                  onClick={this.handleSubmit}
                >
                  联通测试
                </Button>
              </Form.Item>
            </React.Fragment>
          )}
          {getFieldValue("channelSysType") === 2 && (
            <React.Fragment>
              <Form.Item label=" 地址：">
                {getFieldDecorator("mqAddress", {
                  rules: [
                    {
                      required: true,
                      message: "请输入地址!"
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={100}
                    placeholder="请输入地址"
                  />
                )}
              </Form.Item>
              <Form.Item label=" GroupID：">
                {getFieldDecorator("groupId", {
                  rules: [
                    {
                      required: true,
                      message: "请输入GroupID!"
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={150}
                    placeholder="请输入GroupID"
                  />
                )}
              </Form.Item>

              <Form.Item label=" Topic：">
                {getFieldDecorator("topic", {
                  rules: [
                    {
                      required: true,
                      message: "请输入Topic!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={200}
                    placeholder="请输入Topic"
                  />
                )}
              </Form.Item>
              <Form.Item label=" Tag：">
                {getFieldDecorator("tag", {
                  rules: [
                    {
                      required: true,
                      message: "请输入Tag!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={50}
                    placeholder="请输入Tag"
                  />
                )}
              </Form.Item>

              <Form.Item label=" accessKey：">
                {getFieldDecorator("accessKey", {
                  rules: [
                    {
                      required: true,
                      message: "请输入accessKey!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={50}
                    placeholder="请输入accessKey"
                  />
                )}
              </Form.Item>
              <Form.Item label=" secretKey：">
                {getFieldDecorator("secretKey", {
                  rules: [
                    {
                      required: true,
                      message: "请输入secretKey!",
                      whitespace: true
                    }
                  ]
                })(
                  <Input
                    style={{ width: 466 }}
                    maxLength={50}
                    placeholder="请输入secretKey"
                  />
                )}
              </Form.Item>
              <Form.Item {...tailFormItemLayout}>
                <Button
                  type="primary"
                  htmlType="submit"
                  onClick={this.handleSubmit}
                >
                  联通测试
                </Button>
              </Form.Item>
            </React.Fragment>
          )}
        </Form>
      </Card>
    );
  }
}

export default ImConfig;
